<template>
  <div>
    <h2>购物车</h2>
    <table>
      <tr>
        <td>全选/反选 <input type="checkbox" v-model="allSelected" /></td>
        <td>商品</td>
        <td>单价</td>
        <td>数量</td>
        <td>小计</td>
        <td>操作</td>
      </tr>
      <tr v-for="item of lists" :key="item.id">
        <td>
          <input type="checkbox" v-model="item.isSelected" />
        </td>
        <td>{{ item.productName }}</td>
        <td>{{ item.productPrice }}</td>
        <td>
          <input
            type="number"
            style="width: 30px"
            min="1"
            v-model="item.productCount"
          />
        </td>
        <td>{{ item.productCount * item.productPrice }}</td>
        <td><button @click="delItem(item.id)">删除</button></td>
      </tr>
    </table>
    <h3>总价:{{ sum }}</h3>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useHttpHook } from "./Hooks/useHttpHook";
import { useSelectAndSumHook } from "./Hooks/useSelectAndSumHook";
const { lists } = useHttpHook();
const { sum, allSelected } = useSelectAndSumHook(lists);
/* 删除 */
const delItem = (id) => {
  lists.value = lists.value.filter((item) => item.id != id);
};
/* 全选/反选 */
// const allSelected = computed({
//   get: () => {
//     return lists.value.every((item) => item.isSelected);
//   },
//   set: (val) => {
//     lists.value.forEach((item) => {
//       item.isSelected = val;
//     });
//   },
// });
// const sum = computed(() => {
//   let total = 0;
//   lists.value.forEach((item) => {
//     if (item.isSelected) {
//       total += item.productCount * item.productPrice;
//     }
//   });
//   return total;
// });
</script>

<style scoped></style>
